<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h2,
        p {
            margin: 0;
        }

        .box {
            margin: 30px auto;
            width: 300px;
        }

        #user,
        #message {
            box-sizing: border-box;
            width: 300px;
            border: 1px solid #000;
            padding: 10px;
            height: 100px;
            resize: none;
            display: block;
        }

        #user {
            padding: 0 10px;
            height: 30px;
            margin-bottom: 10px;
        }

        #btn {
            display: block;
            margin: 10px auto;
            width: 60%;
            height: 40px;
        }

        #list {
            border-top: 1px solid #000;
            padding: 10px 0 0;
            margin: 0;
            list-style: none;
        }

        #list li {
            position: relative;
            font: 14px/30px "宋体";
            border-bottom: 1px solid #000;
            padding: 0 15px;
            overflow: hidden;
        }

        .clos {
            position: absolute;
            right: 5px;
            top: 10px;
        }

        .replay {
            position: absolute;
            right: 5px;
            top: 35px;
        }

        .mask {
            width: 100vw;
            height: 100vh;
            background: black;
            opacity: .3;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }

        .comfirm {
            width: 200px;
            height: 120px;
            background: white;
            text-align: center;
            position: absolute;
            left: 50%;
            top: 30%;
            border-radius: 5px;
            transform: translate(-50%, -50%);
            overflow: hidden;
            display: none;

        }

        .comfirm button {
            /* position: absolute; */
            /* right: 10px; */
            float: right;
            margin-top: 20px;
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="box">
        <input type="text" id="user" value="小明" />
        <textarea id="message">我就是传说中的无敌小明</textarea>
        <button id="btn">提交留言</button>
        <ul id="list">
            <!-- <li style="height: auto">
            <h2 class="user">小王说:</h2>
            <p>呼叫无敌小明</p>
            <a href="javascript:;" class="clos">删除</a>
            <a href="javascript:;" class="replay">回复</a>
        </li> -->
            <!-- <li style="height: auto">
            <h2 class="user">老师说:</h2>
            <p>小明滚出去</p>
            <p>回复的内容</p>
            <a href="javascript:;" class="clos">删除</a>
            <a href="javascript:;" class="replay">回复</a>
        </li> -->
        </ul>
        <div class="mask">

        </div>
        <div class="comfirm">
            <span>添加回复</span>
            <input />
            <button>取消</button>
            <button>确定</button>
        </div>
    </div>
    <script>
        // 一、实现添加留言的功能
        /* 
            1.获取需要添加的内容
            2.根据留言信息创建元素节点(不要改变原本dom结构)
            3.把创建出来的元素添加到指定位置；
         */
        // 1.获取添加内容
        // var user = document.querySelector("#user").value;
        // var message = document.querySelector("#message").value;
        //var  user = '小明';var  message = '我就是传说中的无敌小明';
        // 值 是什么时候获取的 进页面的时候获取的
        var userEle = document.querySelector("#user");
        var messageEle = document.querySelector("#message");

        var addBtn = document.querySelector("#btn");
        // 获取list元素
        var list = document.querySelector("#list");


        // 回复相关元素
        var maskEle = document.querySelector(".mask");
        var comfirmEle = document.querySelector(".comfirm");
        // 获取确定或者取消2个按钮的数组
        var btns = document.querySelectorAll(".comfirm button");
        var inputEle = document.querySelector(".comfirm input");
        var index = 0;  //全局变量
        var clickIndex = 0;
        var that;
        addBtn.onclick = function () {
          
           
            // 在点击添加留言按钮的时候获取值；值在每次点击的时候都会更改;
            var user = userEle.value;
            var message = messageEle.value;
            //  console.log(user,message);
            // 创建对应的dom节点,更改数据
            var li = document.createElement("li");
            li.setAttribute("style", 'height: auto');
            li.innerHTML = '<h2 class="user">' + user + '说:</h2><p>' + message + '</p><a href="javascript:;" class="clos">删除</a><a href="javascript:;" class="replay">回复</a>';
            console.log(li);
            // 再li生成的时候 立刻给 删除按钮绑定事件
            // 获取每个li里的删除按钮 ,再 li里面 获取一个类名叫clos元素
            var delBtn = li.querySelector(".clos");
            delBtn.onclick = function () {
                console.log("删除");
                // 删除 有删除按钮的父元素 ;
                this.parentNode.remove();
            }

            var replayEle = li.querySelector(".replay");
            index++;
            console.log(index);
            replayEle.index = index;
            replayEle.onclick = function () {
                //  console.log("点击了回复按钮");
                // 让遮罩层 和 回复的弹框显示出来
                console.log( replayEle.index );
                clickIndex = replayEle.index - 1;
                maskEle.style.display = "block";
                comfirmEle.style.display = "block";
                that = this;

            }

            // 把创建的li添加到指定位置
            list.appendChild(li);

        }

        // 进页面就执行了  ，能不能获取到删除按钮，所以 你一样要在创建完删除按钮之后再获取 
        // function addDelEvent() {
        //     var delBtns = document.querySelectorAll(".clos");
        //     delBtns.forEach(delbtn => {
        //         delbtn.onclick = function () {
        //             console.log("删除");
        //         }
        //     })
        // }
        // 点击确定的按钮
            btns[1].onclick = function () {
                console.log(clickIndex);  //代表是 当前要回复的li再所有li里的索引值
                //1.生成索引值 index 2.如何通过全局变量保存索引值;clickIndex
                console.log("点击了确定的按钮")
                var replayValue = inputEle.value;
                // 获取所有的li
                // var lis = document.querySelectorAll("#list li");
                // //  console.log( lis[clickIndex] ) //点击回复的当前li
                var p = document.createElement("p");
                p.innerHTML = replayValue;
                // // 获取删除按钮
                // var delEle = lis[clickIndex].querySelector(".clos");
                // // 把创建的p标签添加到 删除按钮之前；
                // lis[clickIndex].insertBefore(p,delEle)
                // console.log(that);
                var  delEle = that.previousElementSibling;
                var  pEle = that.parentNode;
                pEle.insertBefore(p,delEle);
                // console.log(delEle);
                maskEle.style.display = "none";
                comfirmEle.style.display = "none";
            }
            // 点击了取消的按钮
            btns[0].onclick = function () {
                console.log("点击了取消的按钮")
                maskEle.style.display = "none";
                comfirmEle.style.display = "none";
            }

        // 三、回复功能
        /* 
            1.显示或者隐藏回复的对话框   点击回复按钮的时候弹出弹框 ，点击弹框里确定或者是取消的时候要隐藏弹框
            2.获取对话框里的内容 ，添加到指定的位置（难点）;
                    定位的问题
        */
            // 回调地狱：代码出现函数的层层嵌套 promise 
            // test().fn().fn2().fn3();  
            // function  test(params) {
            //    function fn(){
            //        function fn2(){
            //         function fn3(){
                       
            //         }
            //        }
            //    }
            // }
    </script>
</body>

</html>